<script>
import { sumBy } from 'lodash';
import { GlTab, GlBadge } from '@gitlab/ui';
import VulnerabilityReport from './vulnerability_report.vue';

export default {
  components: { GlTab, GlBadge, VulnerabilityReport },
  props: {
    title: {
      type: String,
      required: true,
    },
    isActiveTab: {
      type: Boolean,
      required: true,
    },
    filterDropdowns: {
      type: Array,
      required: true,
    },
    fields: {
      type: Array,
      required: true,
    },
    filterFn: {
      type: Function,
      required: false,
      default: (filters) => filters,
    },
  },
  data() {
    return {
      counts: undefined,
    };
  },
  computed: {
    countsSum() {
      return sumBy(this.counts, (x) => x.count);
    },
  },
  methods: {
    updateCounts(counts) {
      this.counts = counts;
    },
  },
};
</script>

<template>
  <gl-tab>
    <template #title>
      <span>{{ title }}</span>
      <gl-badge size="sm" class="gl-tab-counter-badge">{{ countsSum }}</gl-badge>
    </template>

    <slot name="header"></slot>

    <vulnerability-report
      class="gl-mt-7"
      :is-visible="isActiveTab"
      :filter-dropdowns="filterDropdowns"
      :fields="fields"
      :filter-fn="filterFn"
      show-counts
      @counts-changed="updateCounts"
    />
  </gl-tab>
</template>
